<template>
  <section class="component essential-information">
    <ul class="overflow-hidden">
      <li class="float-left" v-for="{ value, label, index } in this.information" :key="index">
        <span>{{ label }}：</span>
        <span>{{ value }}</span>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Watch } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { FilterService } from "~/utils/filter.service";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {}
})
export default class EssentialInformation extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  private caseInfo: any = {};
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.Mutation private updateAccountCaseInfo;

  private information: any = [
    {
      key: "productNo",
      label: "产品编号",
      value: ""
    },
    {
      key: "productType",
      label: "产品类型",
      value: ""
    },
    {
      key: "productChannel",
      label: "产品渠道",
      value: ""
    },
    {
      key: "reasonCode",
      label: "入催原因码",
      value: ""
    },
    {
      key: "payDate",
      label: "还款日",
      value: ""
    },
    {
      key: "billDate",
      label: "账单日",
      value: ""
    },
    {
      key: "caseMoney",
      label: "账户总金额",
      value: ""
    },
    {
      key: "capitalBalance",
      label: "账户本金余额",
      value: ""
    },
    {
      key: "historyMaxOverdueAmount",
      label: "历史最高逾期期数逾期金额",
      value: ""
    },
    {
      key: "overdueLoans",
      label: "逾期贷款笔数",
      value: ""
    },
    {
      key: "historyMaxOverdueDays",
      label: "历史逾期最大天数",
      value: ""
    },
    {
      key: "halfYearRepayTimes",
      label: "近6个月逾期还款次数",
      value: ""
    },
    {
      key: "latelyPayDate",
      label: "最近还款日期",
      value: ""
    },
    {
      key: "latelyPayAmount",
      label: "最近一次还款金额",
      value: ""
    },
    {
      key: "historyMaxOverduePeriod",
      label: "历史最高逾期期数",
      value: ""
    },
    {
      key: "currentLimit",
      label: "当前额度",
      value: ""
    },
    {
      key: "usedLimit",
      label: "已用额度",
      value: ""
    },
    {
      key: "availableLimit",
      label: "可用额度",
      value: ""
    },
    {
      key: "lockTime",
      label: "默认锁定时间",
      value: ""
    },
    {
      key: "leaveDueDate",
      label: "指定锁定时间",
      value: ""
    },
    {
      key: "handlerCode",
      label: "经办代号",
      value: ""
    },
    {
      key: "teamLockTime",
      label: "团队锁定时间",
      value: ""
    }
  ];

  @Watch("caseId") private change(val) {
    this.refreshData();
  }
  private activated() {
    this.refreshData();
  }
  private refreshData() {
    console.log('this.caseId', this.caseId);
    this.caseOperatorPageService
      .queryCaseDetailInfo(this.caseId)
      .subscribe(data => {
        const obj = {
          ...data,
          caseMoney: this.$filter.toThousands(data.caseMoney),
          overdueAmount: this.$filter.toThousands(data.overdueAmount)
        };
        this.updateAccountCaseInfo(obj);

        this.information.forEach(v => {
          switch (v.key) {
            case "latelyPayDate":
            case "leaveDueDate":
              v.value = FilterService.dateFormat(data[v.key]);
              break;
            case "lockTime":
            case "teamLockTime":
              v.value = FilterService.dateTimeFormat(data[v.key]);
              break;
            case "reasonCode":
              v.value = this.$filter.dictConvert(data[v.key], "ReasonCode");
              break;
            case "caseMoney":
            case "capitalBalance":
            case "historyMaxOverdueAmount":
            case "latelyPayAmount":
            case "currentLimit":
            case "availableLimit":
            case "usedLimit":
              v.value =
                data[v.key] && `${this.$filter.toThousands(data[v.key])}元`;
              break;
            default:
              v.value = data[v.key];
              break;
          }
        });
      });
  }
}
</script>
<style lang="less">
.component.essential-information {
  padding: 0px 5px 0px 0px;
  .padding-bottom-8 {
    padding-bottom: 8px;
    .name {
      color: #606266;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      font-size: 12px;
      list-style: none;
      padding-bottom: 10px;
    }
  }
}
</style>
